何謂Vue?

我們可以把它視為一個漸進式框架或是函式庫。而什麼是漸進式框架呢？

漸進式框架

白話文：就是你想要用哪部分都可以自行決定。有點像是你買一個可拆式工具箱，可以依照自己的需求選擇工具。
例如：假使我們專案不需要用到Vue-router，便可以不需要全部載入，可以僅使用core即可

參考資料：Vue.js，何謂漸進式框架？

Vue的特點：

1.關注點分離，意思就是Vue只關注畫面與資料的變化，我們不用手動更新操作DOM元素。（雙向綁定）
2.操作物件模型為主的開發模式（就是操作資料）
3.模板語法
4.元件化

了解Vue特性點後，接下來我們必須了解一下Vue到底怎麼傳遞資料呢？這時候就必須先提到MVC、跟MVVM觀念介紹

MVC、MVVM介紹

MVC示意圖如下

簡單來說使用者就是透過（View）畫面來觸發控制器，控制器再與資料庫這邊請求資料，請求資料後再回傳到畫面上。

MVVM示意圖

簡單來說就是Vue幫我們處理好Dom Listeners和Data Bindings這兩部分，我們只要處理資料內容，畫面就會即時更動。我們直接來看個例子，大家應該會比較清楚。

範例1

  <div id="app">
    <input type="text" v-model="msg">
  </div>

  <script>
  var app = new Vue({
  el:'#app',
  data:{ msg:'hello world!'}
  })
  </script>

說明：打開jsbin，我們可以發現input跟h1上有預設一段文字hello world!，而這段文字怎麼產生呢？就是透過在HTML結構上添加Vue指令：v-model來綁定我們資料，接著我們可以試著在input上修改文字，可以發現h1資料也即時更動。這種畫面跟著資料一起變動就是MVVM特性。

OK，那我們初步了解Vue是透過相關指令來綁定資料與畫面後，就必須來談談Vue的一大特色：元件

元件（components）簡介：

元件介紹部分，會在後面有更詳細介紹喔！今天僅會初步簡介一下元件功能！
什麼是元件？

每個 Vue.js 的應用程式都是從Vue建構式 (vue constructor) 建立根實體 (root vue instance) 開始，再一個個將元件 (Components) 搭建上去而來的，透過元件的方式能讓開發者將程式碼封裝而更好重用。

備註：子元件都會有一個父元件

最後，介紹完Vue相關特點後，我們終於可以開始使用Vue摟～

如何載入Vue?

1.使用CDN載入Vue

<script src=“https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js”></script>

2.使用Vue-CLi建構專案
npm install vue

版本間差異

Development version(未壓縮版)
Production version(被壓縮過版本)

無法使用Vue tool develop觀看結構！
Vue CLi打包過後的版本都會是壓縮版喔！

明天部分，會開始介紹Vue實體特性與Vue寫法，那我們就明天見啦！